<template>
	<view class="oneStepMain" @touchstart="touchstart" @touchend="touchend">
		<div class="timeOver" @click.stop="gotoPage">
			<text>跳过</text>
			<text style="margin-left: 7px">{{timer}}秒</text>
		</div>
		<div class="oneStepMain-item" v-if="showPage === 1">
			<image src="../../static/yqhTitle.png" class="slide-down" mode=""></image>
			<image src="../../static/yqhTime.png" class="slide-up" mode="" style="margin-bottom: 20px"></image>
		</div>
		<div class="oneStepMain-item" v-if="showPage === 2">
			<image src="../../static/yqhWord1.png" class="slide-downWrods" mode="" style="margin-bottom: 10px"></image>
		</div>
		<div class="oneStepMain-item" v-if="showPage === 3">
			<image src="../../static/yqhWord2.png" class="slide-downWrods2" style="margin-bottom: 30px" mode=""></image>
		</div>
		<div class="oneStepMain-item" v-if="showPage === 4">
			<image src="../../static/yqhWord3.png" class="slide-downWrods3" mode=""></image>
			<image src="../../static/more.png" class="slide-up" style="margin: 10px 0 50px 0;" mode="" @click="gotoPage"></image>
		</div>
	</view>
</template>

<script>
	export default {
		data(){
			return {
				showPage: 1,
				startY: 0,
				endY: 0,
				timer: 15
			}
		},
		onLoad() {
			this.$nextTick(() => {
        // 开始15秒倒计时
				this.startCountdown(this.timer);
			})
		},
		onHide() {
			this.timer = 0
		},
		methods:{
			touchstart(event) {
				this.startY = event.changedTouches[0].pageY
			},
			touchend(event) {
				this.endY = event.changedTouches[0].pageY
				if (this.endY - this.startY > 0 && this.showPage > 1) {
					this.showPage--
				} 
				if (this.endY - this.startY < 0 && this.showPage <= 4) {
					this.showPage++
				}
			},
			gotoPage() {
				uni.reLaunch({
					url: `/pages/index/index`
				})
			},
			
			startCountdown(duration) {
			    const interval = 1000; // 1秒
			 
			    const countdown = setInterval(() => {
					if (this.timer > 0) {
						this.timer--;
					}
			        if (this.timer === 0) {
			            clearInterval(countdown); // 停止计时器
			            this.gotoPage()
			        }
			    }, interval);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.oneStepMain {
		width: 100%;
		height: 100vh;
		background: url('/static/yqhbg.jpeg');
		background-size: 100% 100%;
		display: flex;
		position: relative;
		.timeOver {
			position: absolute;
			width: 74px;
			height: 32px;
			right: 10%;
			top: 10%;
			box-sizing: border-box;
			display: flex;
			align-items: center;
			justify-content: center;
			border: 0.5px solid rgba(255, 255, 255, 0.5);
			border-radius: 16px;
			background: rgba(255, 255, 255, 0.3);
			color: rgb(244, 234, 200);
			font-family: PingFang SC;
			font-size: 13px;
			font-weight: 500;
			line-height: 18px;
			letter-spacing: 0px;
			text-align: center;
		}
		&-item {
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}
	}
	.slide-down {
		width: 73px; /* 根据需要调整 */
		height: 234px; /* 根据需要调整 */
		animation: slideDown 2s infinite; /* 直接在animation中使用函数 */
		animation-iteration-count: 1;
		z-index: 1;
	}
	.slide-up {
		width: 135px;
		height: 48px;
		animation: slideUp 2s infinite; /* 直接在animation中使用函数 */
		animation-iteration-count: 1;
		z-index: 1;
	}
	.slide-downWrods {
		width: 311px; /* 根据需要调整 */
		height: 348px; /* 根据需要调整 */
		animation: slideDownWrods 2s infinite; /* 直接在animation中使用函数 */
		animation-iteration-count: 1;
		z-index: 1;
	}
	.slide-downWrods2 {
		width: 311px; /* 根据需要调整 */
		height: 336px; /* 根据需要调整 */
		animation: slideDownWrods3 3s infinite; /* 直接在animation中使用函数 */
		animation-iteration-count: 1;
		z-index: 1;
	}
	.slide-downWrods3 {
		width: 311px; /* 根据需要调整 */
		height: 235px; /* 根据需要调整 */
		
		animation: slideDownWrods3 3s infinite; /* 直接在animation中使用函数 */
		animation-iteration-count: 1;
		z-index: 1;
	}
	@keyframes slideDown {
		from { transform: translateY(-238px); }
		to { transform: translateY(0px); } /* 直接在keyframes中定义 */
	}
	@keyframes slideUp {
		from { transform: translateY(227px); }
		to { transform: translateY(0px); } /* 直接在keyframes中定义 */
	}
	@keyframes slideDownWrods {
		from { transform: translateY(-220px); }
		to { transform: translateY(0px); } /* 直接在keyframes中定义 */
	}
	@keyframes slideDownWrods3 {
		from { transform: translateY(-220px); }
		to { transform: translateY(0px); } /* 直接在keyframes中定义 */
	}
	
</style>